<script setup>
import {onBeforeMount, ref, provide} from "vue";
import {getAdminAllInfo, getAllowMailsPageAPI} from "@/api/manager.js";
import useAccountStore from "@/store/modules/AccountStore.js";
import TypeWrite from "@/components/TypeWrite.vue";
import {MY_ROUTE} from "@/router/routes/index/index.js";
import {useRouter} from "vue-router";
import AddBg from "@/views/index/home/components/AddBg.vue";
import {getBgAPI} from "@/api/bg.js";
import useBgStore from "@/store/modules/BgStore.js";
import EditorBg from "@/views/index/home/components/EditorBg.vue";

const router = useRouter()

const manager = ref({})
onBeforeMount(async () => {
  const res = await getAdminAllInfo()
  manager.value = res
  useAccountStore().saveManager(res)
})

const goMy = () => {
  router.push({name: MY_ROUTE})
}

// 分页数据
const current = ref(1)
const pageSize = ref(10)
const pageCnt = ref(0)
const size = ref(0)
const data = ref([])
const search = async () => {
  const res = await getBgAPI(current.value, pageSize.value)
  if (res.data.length === 0) return
  current.value = res.current
  pageSize.value = res.pageSize
  pageCnt.value = res.pageCnt
  size.value = res.size
  data.value = res.data
  if (useBgStore().bgImgUrl === null || useBgStore().bgImgUrl === undefined || useBgStore().bgImgUrl.length <= 0) {
    useBgStore().saveBgImgUrl(data.value[0].imgUrl)
    // return
  }
  // const nowBgImgUrl = useBgStore().bgImgUrl
  // if (!(data.value.map(i => i.imgUrl).includes(nowBgImgUrl))) {
  //   useBgStore().saveBgImgUrl(data.value[0].imgUrl)
  // }
}
// 分页每页数据大小改变
const handlePageSizeChange = async (val) => {
  pageSize.value = val
  await search()
}
// 当前页发生变化
const handleCurrentChange = async (val) => {
  current.value = val
  await search()
}
onBeforeMount(async () => {
  await search()
})

const changeBg = (imgUrl) => {
  useBgStore().saveBgImgUrl(imgUrl)
}

// 新增
const addBgVisible = ref(false)
// 显示
const showAddBg = () => {
  addBgVisible.value = true
}
// 传递给子组件
provide('addBgVisible', {
  addBgVisible,
  search
})

// 编辑
const editorBgVisible = ref(false)
const editorBgImg = ref({})
// 显示
const showEditorBg = (img) => {
  editorBgImg.value = img
  editorBgVisible.value = true
}
// 传递给子组件
provide('editorBgVisible', {
  editorBgVisible,
  editorBgImg,
  search
})
</script>

<template>
  <div class="home">
    <div class="glass-container flex justify-between items-center">
      <div
          @click="goMy"
          class="text-gray-100 p-4 flex justify-start items-center cursor-pointer"
      >
        <div class="mr-4 w-20 h-20 rounded-full overflow-hidden">
          <img class="w-full h-full object-cover" :src="manager?.avatar" alt="">
        </div>
        <div>
          <div class="text-xl">{{ manager?.username }}</div>
          <div class="mt-1 text-gray-300 text-xs">账号：{{ manager?.account }}</div>
        </div>
      </div>
      <div class="mr-8">
        <TypeWrite :content="`嘿！${manager?.username}，欢迎回来！`"></TypeWrite>
      </div>
    </div>
    <div class="bg-list glass-container mt-6 p-4">
      <div class=" flex items-center justify-between">
        <div class="part-title title text-xl">
          请选择背景图片
          <!--<TypeWrite :content="`请选择背景图片`"></TypeWrite>-->
        </div>
        <el-button type="primary" plain @click="showAddBg">新增背景图片</el-button>
      </div>
      <div class="bg-img-box grid-container mt-4">
        <el-image
            v-for="(img, idx) in data"
            class="rounded-xl cursor-pointer"
            title="鼠标左键点击更换背景图片, 鼠标右键点击预览/删除背景图片"
            :key="idx"
            style="width: 240px; height: 240px"
            :src="img?.imgUrl"
            fit="cover"
            @click.left="changeBg(img.imgUrl)"
            @click.right.prevent="showEditorBg(img)"
        />
      </div>
      <div class="mt-4 flex justify-end items-center">
        <el-pagination
            v-model:current-page="current"
            v-model:page-size="pageSize"
            :page-sizes="[1, 5, 10, 20, 30, 40]"
            :total="pageCnt"
            layout="sizes, prev, pager, next, jumper"
            @size-change="handlePageSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <AddBg></AddBg>
    <EditorBg></EditorBg>
  </div>
</template>

<style scoped lang="scss">
.bg-img-box {
  max-height: 500px;
}

.grid-container {
  display: grid;
 //列数自动填充，列宽最小为 7rem，最大占1份平均grid容器宽度
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-auto-flow: row; // 容器元素按顺序自动放置，默认先行后列
  column-gap: 1rem; // 列间距
  row-gap: 1rem; // 行间距
  justify-items: center; // 单元格内元素水平位置
  align-items: center; // 单元格内元素垂直位置
}
</style>